<template>
  <el-button @click="open">新增管理员</el-button>
  <el-table :data="tableData">
    <el-table-column prop="adminname" label="管理员账号" />
    <el-table-column label="角色">
      <template #default="scope">
        <el-tag v-if="scope.row.role === 1">管理员</el-tag>
        <el-tag type="success" v-if="scope.row.role === 2">超级管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-space>
          <el-button>编辑</el-button>
          <el-popconfirm
            title="Are you sure to delete this?"
            @confirm="confirm(scope.row.adminid)"
          >
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
        </el-space>
      </template>
    </el-table-column>
  </el-table>

  <el-drawer v-model="drawer" title="新增管理员">
    <el-form :model="form">
      <el-form-item>
        <el-input placeholder="用户名" v-model="form.adminname" />
      </el-form-item>
      <el-form-item>
        <el-input placeholder="密码" v-model="form.password" />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="form.role"
          placeholder="请选择权限"
          style="width: 100%"
        >
          <el-option label="超级管理员" :value="2" />
          <el-option label="管理员" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-tree
          @check-change="handleChange"
          :data="store.menuList"
          show-checkbox
          node-key="index"
          :props="defaultProps"
          default-expand-all
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="add">添加</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { adminApi, removeAdminApi, addAdminApi } from "@/api/admin";
import { ElMessage } from "element-plus";

import { useBannerStore } from "@/stores/banner";
const store = useBannerStore();

const tableData = ref([]);

const getData = async () => {
  const res = await adminApi();
  console.log(res);
  res && (tableData.value = res.data);
};

onMounted(() => {
  getData();
});

const confirm = async (id: string) => {
  const res = await removeAdminApi({ adminid: id });
  if (res) {
    ElMessage.success("删除成功");
    getData();
  }
};

const drawer = ref<boolean>(false);
const form = reactive({
  adminname: "",
  password: "",
  role: 1,
});
const open = () => {
  drawer.value = true;
};

const defaultProps = {
  children: "children",
  label: "title",
};

let checkedArr: string[] = [];
const handleChange = (a: any, b: boolean, c: any) => {
  if (b) {
    checkedArr.push(a.index);
  } else {
    checkedArr = checkedArr.filter((item) => item !== a.index);
  }
};
const add = async () => {
  const res: any = await addAdminApi({
    adminname: form.adminname,
    password: form.password,
    role: form.role,
    checkedKeys: checkedArr,
  });
  if (res) {
    ElMessage.success(res.message);
    drawer.value = false;
    getData();
  }
};
</script>
